<template>
    <el-dialog v-model="dialogVisible" :title="`设定`" width="80%" :before-close="handleClose">
        <el-table :data="tableData.value" v-if="tableData.value?.length" stripe style="width: 100%">
            <el-table-column fixed label="序号" width="180">
                <template #default="scope">
                    <el-input v-model="scope.row.number" placeholder="请输入" />
                </template>
            </el-table-column>
            <!-- <el-table-column prop="name" label="Name" width="180" /> -->
            <el-table-column :label="item.name" v-for="item in tableData.value[0].children" :key="item.id">
                <template #default>
                    <el-input-number v-model="item.fraction" :min="0" placeholder="请输入分数" />
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose()">取消</el-button>
                <el-button type="primary" @click="submit">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
    
<script setup lang='ts'>
import { reactive, ref } from 'vue';
import { raterList, score } from '../../api/api'
let props = defineProps(['dialogVisible', 'maxnum', 'tabdata', "linkid"])
let dialogVisible = ref(props.dialogVisible);
let emit = defineEmits(['cancal']);

const getrater = () => {
    raterList().then(res => {
        console.log(props.tabdata)
        if (props.tabdata?.length > 0) {
            tableData.value = props.tabdata


            if (props.tabdata?.length < res.data.length) {

                console.log(res.data, tableData.value[0].children)
                let arr = []
                res.data.forEach((itema: any, indexa: any) => {
                    let is = false
                    tableData.value[0].children.forEach((itemb: any, indexb: any) => {
                        if (itema.id == itemb.rater_id) {
                            is = true
                        }
                    })
                    console.log(is)
                    if (!is) {
                        // tableData.value[0].children.push({ number: '', children: res.data })
                        arr.push(itema.id)
                    }
                })


                arr.forEach((item: any, index: number) => {
                    tableData.value[0].children.push({ number: tableData.value[0].children[0]?.number, fraction: '', rater_id: item })
                })
            }


            res.data.forEach((item: any, index: number) => {
                tableData.value[0].children[index].name = item.name
            })
        } else {
            tableData.value.push({ number: '', children: res.data })
        }



    })
}
getrater()
const tableData: any = reactive({ value: [] })

let handleClose = () => {
    dialogVisible.value = false;
    emit('cancal')
};

const submit = () => {
    console.log(tableData?.value[0]?.children)
    tableData?.value[0]?.children.forEach((item: any, index: number) => {
        item.number = tableData?.value[0].number
        if (!item.rater_id) {
            item.rater_id = item.id
        }
        if (item.name) {
            delete item.name
        }
        delete item.id
    });
    score({ link_id: props.linkid, data: tableData?.value[0].children }).then((res: any) => {
        if (res.code == 200) {
            ElMessage.success('成功')
        } else {
            ElMessage.warning('失败')
        }
        emit('cancal')
    })

}



</script>
    
<style></style>